<template>
    <div class="con">
        <div class="lwy-back">
            <router-link to="/happyhome/leisure/keepinglive"><i class="el-icon-arrow-left"></i>返回首页</router-link>
        </div>
        <div class="jielu">
            <router-link to="/HappyHome/leisure/keedaka" style="text-decoration: none;">
                <p>体重记录</p>
            </router-link>
            <router-link to="/happyhome/leisure/keeweight" style="text-decoration: none;">
                <p>运动记录</p>
            </router-link>
        </div>
        <div class="footer">
            <div class="img-b">
                <div class="img-b-a">
                    <div slot="header" class="clearfix">
                        <el-button type="primary" size="small" @click="add">
                            <div @click="open">+60秒</div>
                        </el-button>
                    </div>
                    <div>
                        <el-statistic ref="statistic" @click="hilarity" format="HH:mm:ss" :value="deadline4" title="倒计时"
                            time-indices>
                        </el-statistic>
                    </div>
                    <div>
                        <el-button type="primary " size="small" @click="clickFn">暂停</el-button>
                    </div>
                </div>
            </div>

        </div>
        <div class="contain">

            <div class="tab">
                <div class="tab-title" v-for="(item, index) in foodList" :key="index">
                    <div class="aa">
                        <div>
                            <el-button :class="['item', activeIndex === index ? 'change' : '']" @click="btnClick(index)">{{
                                item.name
                            }}</el-button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="main">
                <div class="sub-main" v-for="(item, index) in subFoodList" :key="index">
                    <div class="sub-item">
                        {{ item.name }}
                    </div>

                    <div class="img">
                        <img :src="item.img">
                    </div>
                </div>

            </div>
        </div>


    </div>
</template>

<script>
import axios from 'axios';
export default {

    data() {
        return {
            activeName: 1,
            index: 0,
            number: 1,
            a1: true,
            show: true,
            drawer: false,
            // deadline3: Date.now() + 1000 * 60 * 30,
            deadline4: Date.now(),
            stop: true,
            value: '',
            // 假设后端返回的数组对象
            foodList: [
                {
                    children: [
                        {
                        },
                    ],
                },

            ],
            // 二级内容
            subFoodList: [],
            // 默认索引 0
            activeIndex: 0,
            foodList: [],

        }
    },
    props: {
        msg: String
    },
    mounted() {
        this.render();
    },

    methods: {
        open() {
            this.$notify({
                title: 'ok',
                message: '为你增加+60秒',
                type: 'success',
                position: 'bottom-left',
                duration: 1000,
            })
        },


        hilarity() {
            this.$notify({
                title: '提示',
                message: '时间已经到了哦',
                duration: 1000,
                position: 'bottom-left'
            });
            console.log(this.$notify);
        },

        clickFn() {
            this.$refs.statistic.suspend(this.stop);
            this.stop = !this.stop;
        },

        add() {
            this.deadline4 = this.deadline4 + 1000 * 60 * 1;
            console.log(this.deadline4);
        },

        render() {
            axios({
                url: '/dbdata/foodList',
            }).then(({ data }) => {
                this.foodList = data
                this.activeIndex = 0;
                this.subFoodList = this.foodList[0].children;
            });
        },


        btnClick(index) {
            console.log("ok");
            this.activeIndex = index;
            this.subFoodList = this.foodList[index].children;
            console.log(this.activeIndex[0]);
            console.log(this.subFoodList);
        },

    },


}
</script>

<style scoped lang="less">
.contain {
    //   display: flex;
    background: url('../../assets/image/zlj/bg.gif');
    height: 100%;
    width: 100%;
    color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 0;

}

.img-b {
    margin: auto;
    margin-top: 50px;
}

.img-b-a {
    margin-bottom: 20px;
    display: flex;

    .el-statistic {
        width: 150px;
    }
}

.aa {
    // margin-bottom: 20px;
    float: left;
    margin-top: 10px;
    margin-left: 30px;
    border-radius: 5px;
}

.main {
    width: 98%;
    display: flex;
    height: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 1%;

    .img {
        margin-top: 30px;
        margin-bottom: 50px;
        width: 220px;
        height: 246px;

        &:hover {
            box-shadow: 3px 5px 5px #7d7d7bd7;
        }
    }

    .img img {
        width: 100%;
        height: 100%;

    }
}

.sub-main {

    // margin: 5px;
    .sub-item {
        padding-top: 50px;
    }
}

.footer {
    // padding-bottom: 40px;
    // margin-left: 40%;
    margin-top: -50px;
    margin-left: 20px;
}

.jielu {
    display: flex;
    width: 150px;
    //    display: inline-block;
    margin-left: 20px;
    cursor: pointer;
    justify-content: space-between;

    // border: 1px solid red;
    p {
        color: #000;

        &:hover {
            color: #007bff;
        }
    }
}

.lwy-back {
    text-align: left;
    margin-left: 5px;
    margin-top: 20px;

    a:-webkit-any-link {
        color: rgba(00, 00, 00, 0.67);
        text-decoration: none;

        .el-icon-arrow-left {
            margin-right: 5px;
        }
    }

}

.el-button--primary {
    background-color: rgb(255, 233, 192);
    color: rgba(00, 00, 00, 0.8);
    border-color: rgb(255, 233, 192);
}

.el-button--primary:hover {
    background-color: rgba(255, 233, 192, 0.8);
    color: rgba(00, 00, 00, 0.5);
    border-color: rgba(255, 233, 192, 0.8);
}</style>